<template>
	<swiper class="images" indicator-dots="true" autoplay="true" interval="5000" duration="1000" :style="{height:galleryHeight+'px'}">
		<block v-for="(item, index) in goods.images" :key="index">
			<swiper-item>
				<image :src="item" mode="aspectFill" class="swiper-image" @click="previewImage(index)" :data-current="index"/>
			</swiper-item>
		</block>
	</swiper>
	<view class="summary">
		<text class="title">{{goods.title}}</text>
		<text class="price">￥ {{goods.price}}</text>
	</view>
	<view class="detail">
		<image v-for="(item, index) in goods.detail" :src="item" :key="index" mode="widthFix"></image>
	</view>
	
	<view class="footer">
	    <view class="opt-buttons">
	        <view class="button-group" @click="showCart">
	            <image src="/static/images/mall/icon_cart.png" class="button-image" />
	            <text class="button-text">购物车</text>
	        </view>
	        <view class="button-group" bindtap="">
	            <uni-icons type="chatboxes" color="#777" size="30" ></uni-icons>
				<text class="button-text">联系客服</text>
	        </view>
	    </view>
	    <button class="add-cart" @click="addCart">加入购物车</button>
	</view>
</template>

<script>
	import { ref } from "vue"; // 引入响应式函数ref
	export default {
		setup() { //为一个函数
			let goods = ref({
				title: '华为mate70首发纯血鸿蒙！系统内存效率有了巨大提升，流畅度比安卓还要快三倍',
				price: 9999,
				images: ['/static/images/mall/img4.jpeg'],
				detail: ['/static/images/mall/1.png', '/static/images/mall/2.png', '/static/images/mall/3.png'],
			});
			let current = ref(0);
			let galleryHeight = ref(0);
			
			uni.getSystemInfo({
				success: function (res) {
					galleryHeight.value = res.screenWidth
				}
			})
			
			const previewImage = (index) => {
				uni.previewImage({
					//从<image>的data-current取到current，得到String类型的url路径
					current: goods.value.images[index],
					urls: goods.value.images // 需要预览的图片http链接列表
				})
			}
			
			const showCart = () => {
				uni.switchTab({
					url: '/pages/mall/home/cart/cart'
				});
			}
			
			const addCart = () => {
				uni.showToast({
					title: '已加入购物车',
					icon: 'success',
					duration: 1000
				});
			}
			
			return {
				goods,
				current,
				galleryHeight,
				previewImage,
				showCart,
				addCart
			}
		}
	}
</script>

<style>
	page {
		background: #eee;
	}
	
	/*swiper images*/
	.images {
		position: relative;
	}
	
	.swiper-image {
		width: 100%;
		height: 100%;
	}
	
	/*contains title & price*/
	.summary {
		display: flex; 
		flex-direction: column; 
		justify-content: space-between;
		background: white;
		margin: 20rpx 0;
	}
	
	/*goods title*/
	.title {
		font-size: 34rpx;
		margin: 10rpx;
		line-height: 46rpx;
	}
	
	/*goods price*/
	.price {
		color: #f60;
		margin: 10rpx;
	}
	
	/*详情图片底部边距*/
	.detail {
		margin-bottom: 50px;
	}
	
	.detail image{
		width: 100%;
	}
	
	.footer {
		background: #f9f9f9;
		width: 100%;
		display: flex; 
		flex-direction: row; 
		justify-content: space-between;
		position: fixed;
		bottom: 0;
	}
	
	.add-cart {
		float: right;
		border: 0;	
		line-height: 100rpx;
		text-align: center;
		width: 350rpx;
		height: 100rpx;
		background-color: #f60;
		color: white;
		font-size: 36rpx;
		border-radius: 0px;
	}
	
	/*购物车按钮、收藏等*/
	.opt-buttons {
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-around;
	}
	
	/*cart*/
	.button-group {
		display: flex;
		flex-direction: column;
	}
	
	.button-image {
		width: 60rpx;
		height: 60rpx;
	}
	
	.button-text {
		font-size: 24rpx;
		line-height: 40rpx;
	}
	
	.contact-button {
		width: 60rpx;
		height: 48rpx;
		padding-top: 5px; 
	}
</style>